<template>
    <el-card>
        <section class="page_404">
            <div class="container">
                <div class="row">
                    <div style="width: 100%">
                        <div class="four_zero_four_bg" style="margin: auto;width: 80%">
                            <h1 class="text-center ">{{ thirdDigit }}{{ secondDigit }}{{ firstDigit }}</h1>
                        </div>
                        <div style="text-align: center">
                            <h3 class="h2">
                                Look like you're lost
                            </h3>
                            <p>the page you are looking for not avaible!</p>

                            <el-button @click="goHome" size="medium" round style="width: 150px;">
                                <i class="el-icon-s-home"></i> {{ $t('m.Go_Home') }}
                            </el-button>
                            <el-button
                                    @click="backPage"
                                    size="medium"
                                    round
                                    style="width: 150px;margin-left: 40px;"
                                    type="primary"
                            >
                                <i class="el-icon-back"></i> {{ $t('m.Back') }}
                            </el-button>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    </el-card>
</template>
<script>
export default {
    name: 'NotFound404',
    data() {
        return {
            firstDigit: null,
            secondDigit: null,
            thirdDigit: null,
        };
    },
    mounted() {
        this.init();
    },
    methods: {
        backPage() {
            this.$router.go(-1);
        },
        goHome() {
            this.$router.push({
                name: 'Home',
            });
        },
        init() {
            var loop1,
                loop2,
                loop3,
                time = 30,
                i = 0,
                number;
            loop3 = setInterval(() => {
                if (i > 40) {
                    clearInterval(loop3);
                    this.thirdDigit = 4;
                } else {
                    this.thirdDigit = Math.floor(Math.random() * 9) + 1;
                    i++;
                }
            }, time);
            loop2 = setInterval(() => {
                if (i > 80) {
                    clearInterval(loop2);
                    this.secondDigit = 0;
                } else {
                    this.secondDigit = Math.floor(Math.random() * 9) + 1;
                    i++;
                }
            }, time);
            loop1 = setInterval(() => {
                if (i > 100) {
                    clearInterval(loop1);
                    this.firstDigit = 4;
                } else {
                    this.firstDigit = Math.floor(Math.random() * 9) + 1;
                    i++;
                }
            }, time);
        },
    },
};
</script>
<style scoped>
.text-center {
    text-align: center;
}

.page_404 {
    padding: 40px 0;
    background: #fff;
    font-family: 'Arvo', serif;
}

.page_404 img {
    width: 100%;
}

.four_zero_four_bg {

    background-image: url(https://cdn.dribbble.com/users/285475/screenshots/2083086/dribbble_1.gif);
    height: 400px;
    width: 100%;
    background-position: center;
}
</style>
